<!--
 * @Author: your name
 * @Date: 2020-09-03 23:25:04
 * @LastEditTime: 2020-12-21 09:59:54
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \adminPC\src\views\user\importPeople.vue
-->
<template>
  <div class="wrapper">
    <!-- <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload> -->
    <hr>
    <el-upload
      ref="upload"
      action
      drag
      :before-upload="beforeUpload"
      :limit="1"
      :auto-upload="false"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击选取</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传csv文件，且不超过500kb</div>
    </el-upload>
    <el-button size="small" @click="download">模板下载</el-button>
    <el-button size="small" type="primary" @click="upload">确认上传</el-button>
  </div>
</template>

<script>
import { importTemplate /* importPeople */ } from '@/api/menber'
export default {
  data() {
    return {
      fileList: [],
      ifUP: false
    }
  },
  methods: {
    download() {
      importTemplate().then(res => {
        console.log(res)
      })
    },
    beforeUpload(file) {
      console.log(file)
      const allowType = ['image/png', 'application/vnd.ms-excel']
      const rightType = allowType.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!rightType) {
        this.$message.error('上传文件只能是 csv 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
      }
      this.ifUP = rightType && isLt2M
      this.fileList = file
      return this.ifUP
    },
    upload() {
      this.$refs.upload.submit()
      this.$refs.upload.abort()
      if (!this.ifUP) return // this.$message('请选择要上传的文件')
      this.postFile()
      this.fileList = []
      this.ifUP = false
      this.$refs.upload.clearFiles()
    },
    // 上传文件
    postFile() {
      const fd = new FormData()
      fd.append('file', this.fileList)
      console.log(fd)
      // importPeople(fd).then(() => {
      //   this.$message('上传成功')
      // }).catch(() => {
      //   this.$message('上传失败，请检查文件格式')
      // })
    }

  }
}
</script>
<style lang="scss" scoped>
.wrapper{
  width: 30vw;
  padding: 0px;
  margin: 0 auto;
}
</style>

